// src/components/popups/scholarOverview/RecentScholars/RecentScholarsSearchText.tsx

import React, { useState, useEffect } from 'react';

interface RecentScholarsSearchTextProps {
  value: string;
  onChange: (val: string) => void;
  onSearch: (val: string) => void;
  loading?: boolean;
  placeholder?: string;
  showBackAll?: boolean;
}

const RecentScholarsSearchText: React.FC<RecentScholarsSearchTextProps> = ({
  value,
  onChange,
  onSearch,
  loading = false,
  placeholder = 'Search by name, email, or student number...',
  showBackAll = false,
}) => {
  const [input, setInput] = useState(value);

  useEffect(() => {
    setInput(value);
  }, [value]);

  const handleInputChange = (e: React.ChangeEvent<HTMLInputElement>) => {
    const newValue = e.target.value;
    setInput(newValue);
    onChange(newValue);
  };

  const handleKeyDown = (e: React.KeyboardEvent<HTMLInputElement>) => {
    if (e.key === 'Enter') {
      onSearch(input.trim());
    }
  };

  const handleSearchClick = () => {
    onSearch(input.trim());
  };

  const handleBackAll = () => {
    setInput('');
    onChange('');
    onSearch('');
  };

  return (
    <div className="flex flex-col sm:flex-row items-stretch sm:items-center gap-2 w-full max-w-lg mx-auto py-2">
      <input
        type="text"
        className="flex-1 px-4 py-2 rounded-lg border border-gray-300 dark:border-slate-700 focus:border-blue-500 dark:focus:border-cyan-700 focus:ring-2 focus:ring-blue-100 dark:focus:ring-cyan-700 outline-none transition text-sm sm:text-base bg-white dark:bg-slate-800 shadow-sm min-w-0 w-full text-gray-800 dark:text-gray-100"
        placeholder={placeholder}
        value={input}
        onChange={handleInputChange}
        onKeyDown={handleKeyDown}
        disabled={loading}
        aria-label="Search scholars"
      />
      <div className="flex flex-row sm:flex-row gap-2 w-full sm:w-auto">
        <button
          className="px-4 py-2 rounded-lg bg-blue-600 dark:bg-cyan-700 text-white font-semibold hover:bg-blue-700 dark:hover:bg-cyan-800 transition disabled:opacity-60 disabled:cursor-not-allowed text-sm sm:text-base w-full sm:w-auto"
          onClick={handleSearchClick}
          disabled={loading || !input.trim()}
          aria-label="Search"
          type="button"
        >
          {loading ? (
            <span className="animate-spin inline-block w-4 h-4 border-2 border-white border-t-transparent rounded-full"></span>
          ) : (
            'Search'
          )}
        </button>
        {input && !loading && showBackAll && (
          <button
            className="px-4 py-2 rounded-lg bg-gray-200 dark:bg-slate-700 text-gray-700 dark:text-gray-200 font-semibold hover:bg-gray-300 dark:hover:bg-slate-600 transition text-sm sm:text-base w-full sm:w-auto"
            onClick={handleBackAll}
            disabled={loading}
            aria-label="Back All"
            type="button"
          >
            Back All
          </button>
        )}
      </div>
    </div>
  );
};

export default RecentScholarsSearchText;